<!doctype html>
<meta charset="utf-8">
<title>大数据分析中心</title>
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<script src="js/echarts.js" charset="utf-8"></script>
<script src="./js copy/popen.js"></script>
<script src="./js/jquery-3.2.0.min.js"></script>
<script src="./js/Mrchao.js"></script>
<script src="./js/MrChaoF.js"></script>

<body>

    <div class="bnt">
        <div class="topbnt_left fl">
            <ul>
                <li><a href="#">设计中心</a></li>
                <li><a href="#">计划中心</a></li>
                <li><a href="#">生产中心</a></li>
                <li><a href="#">采购中心</a></li>
            </ul>
        </div>
        <h1 class="tith1 fl">详情分析</h1>
        <div class=" fr topbnt_right">
            <ul>
                <li><a href="#">返回</a></li>
                <li><a href="#">仓库中心</a></li>
                <li>
                    <a href="#"></a>
                </li>
                <li>
                    <a href="#"></a>
                </li>
            </ul>
            </ul>
        </div>
    </div>
    <!-- bnt end -->
    <div class="puleft fl">
        <div class="pulefttop">
            <h2 class="tith2"><span>设计师详情分析</span></h2>
            <div class="lefttoday_tit">
                <p class="fl">设计师</p>
                <p class="fr">设计数量</p>
            </div>
            <div class="box pbox">
                <div class="lefttoday_bar pulefttoday_bar fl">
                    <ul id="style">
                    </ul>
                </div>
                <div class="pvr fr pulefttoday_bar2">
                    <ul>
                        <li class="hot1">1</li>
                        <li class="hot2">2</li>
                        <li class="hot3">3</li>
                        <li class="hot4">4</li>
                        <li class="hot5">5</li>
                    </ul>
                    <div id="puleftbox2bott_cont" class="puleftbox2bott_cont"></div>
                </div>
            </div>
            <!-- lefttoday_number end -->
        </div>
        <div class="puleftboxtmidd">
            <h2 class="tith2">版单分析中心</h2>
            <!-- <div class="lefttoday_tit">
                <p class="fl">状态：已调节</p>
                <p class="fr">时间段：2018-06-10 至 2018-06-14</p>
            </div>
            <div class="box pbox">
                <div id="puleftboxtmidd1" class="fl puleftboxtmidd1"></div>
                <div class="pvr fr pulefttoday_bar2">
                    <ul>
                        <li class="hot1">1</li>
                        <li class="hot2">2</li>
                        <li class="hot3">3</li>
                        <li class="hot4">4</li>
                        <li class="hot5">5</li>
                    </ul>
                    <div id="puleftboxtmidd2" class="puleftbox2bott_cont"></div>
                </div>
            </div> -->
            <div id="echart1" style="width: 100%;height: 100%;"></div>
        </div>
        <div class="puleftboxtbott">
            <h2 class="tith2 pt1">订单分析中心</h2>
            <div class="box pbox">
                <div id="echart2" style="width: 100%;height: 120%;"></div>
            </div>
        </div>
    </div>
    <!--  left1 end -->
    <div class="fl pt6 puleft2">
        <div class="pmidd_bott">
            <div class="pumiddboxttop1 fl">
                <h2 class="tith2 pt3">数据分析</h2>
                <div class="lefttoday_tit">
                    <!-- <p class="fl">状态：已调节</p>
                    <p class="fr">时间段：2018-06-10</p> -->
                </div>
                <div class="puleft2height">
                    <div class="widget-inline-box text-center ">
                        <p>订单总数</p>
                        <h3 id="allqty1" class=" ceeb1fd f30"></h3>
                        <h4 class="text-muted ">环比<img src="img/iconup.png" height="16" />2%</h4>
                    </div>
                    <div class="widget-inline-box text-center ">
                        <p>生产总数</p>
                        <h3 id="allqty2" class=" c24c9ff f30"></h3>
                        <h4 class="text-muted ">环比<img src="img/iconup.png" height="16" />3%</h4>
                    </div>
                    <div class="widget-inline-box text-center ">
                        <p>裁剪总数</p>
                        <h3 id="allqty3" class=" cffff00 f30"></h3>
                        <h4 class="text-muted ">环比<img src="img/iconup.png" height="16" />3%</h4>
                    </div>
                    <div class="widget-inline-box text-center ">
                        <p>出货总数</p>
                        <h3 id="allqty4" class=" ceeb1fd f30"></h3>
                        <h4 class="text-muted ">环比<img src="img/iconup.png" height="16" />2%</h4>
                    </div>
                </div>
            </div>
            <div class="pumiddboxttop2 fl">
                <h2 class="tith2 pt3">热门信息</h2>
                <div class="lefttoday_tit ">
                    <p class="fl">状态：已调节</p>
                    <p class="fr">时间段：2018-06-10</p>
                </div>
                <div class="left2_table pumiddboxttop2_cont">
                    <ul>
                        <li>
                            <p class="text_l">1月服装生产120000件，订单110000件</p>
                            <p class="text_r"> 时间：86 2018-06-14 11:08:56</p>
                        </li>
                        <li class="bg">
                            <p class="text_l">2月服装生产120000件，订单110000件</p>
                            <p class="text_r">时间：86 2018-06-14 11:08:56</p>
                        </li>
                        <li>
                            <p class="text_l">3月服装生产120000件，订单110000件</p>
                            <p class="text_r"> 时间：86 2018-06-14 11:08:56</p>
                        </li>
                        <li class="bg">
                            <p class="text_l">4月服装生产120000件，订单110000件</p>
                            <p class="text_r"> 时间：86 2018-06-14 11:08:56</p>
                        </li>
                        <li>
                            <p class="text_l">5月服装生产120000件，订单110000件</p>
                            <p class="text_r"> 时间：86 2018-06-14 11:08:56</p>
                        </li>
                        <li class="bg">
                            <p class="text_l">6月服装生产120000件，订单110000件</p>
                            <p class="text_r"> 时间：86 2018-06-14 11:08:56</p>
                        </li>
                </div>
            </div>
        </div>
        <!--  amidd_bott end-->
        <div class="pmiddboxtbott">
            <h2 class="tith2 pt1">走势图</h2>
            <div class="box pbox">
                <div id="echart6" style="width: 100%;height:100%"></div>
            </div>
        </div>
        <!-- amidd_bott end -->
    </div>
    <!-- mrbox_top end -->
    <div class="mr_right fl">
        <div class="purightboxtop">
            <h2 class="tith2 pt12">设计颜色分析中心</h2>
            <div id="echart3" style="height: 100%;width: 100%;"></div>
        </div>
        <div class="purightboxmidd">
            <h2 class="tith2 pt12">近7个月订单走势图</h2>
            <div id="echart4" style="width: 100%;height: 100%;margin-left: 4%;"></div>
        </div>
        <div class="purightboxbott">
            <h2 class="tith2 pt12">订单季组占比图</h2>
            <div id="echart5" style="width: 100%;height:100%"></div>
        </div>
    </div>
    <!-- mrbox_top_right end -->
    </div>


    </div>
    <script>
    </script>

    <script type="text/javascript">
        var $_$ = $
        AJAX("http://139.9.245.84:8300/rfCRUD/BiSQLSeleData", {
                sql: "select single_name,style,count(single_name) total from er_mps_design GROUP BY single_name",
                T: 1
            }, 'GET', null, null,
            (res) => {
                var myChart = echarts.init(document.getElementById('puleftbox2bott_cont'));
                console.log(res)
                data = res.data
                var name = [], //设计师姓名
                    value = [], //设计数量
                    style = []; //设计风格
                for (var i = 0; i < data.length; i++) {
                    name.push(data[i].single_name)
                    value.push(data[i].total)
                    style.push(data[i].style)
                }
                // <li class="c1 big1" style="top: 25%;left: 16%;"><span>交通警情6</span></li>
                //         <li class="c2 big2" style="top: 35%;left: 65%;"><span>求助1</span></li>
                //         <li class="c3 big4" style="top: 25%;left: 35%;"><span>无效报警2</span></li>
                //         <li class="c4 big5" style="top: 65%;left: 65%;"><span>投诉2</span></li>
                //         <li class="c5 big6" style="top: 65%;left: 25%;"><span>灾害事故1</span></li>
                //         <li class="c6 big1" style="top: 45%;left: 15%;"><span>刑事案件1</span></li>
                //         <li class="c1 big0" style="top: 35%;left: 75%;"></li>
                //         <li class="c2 big0" style="top: 85%;left: 55%;"></li>
                //         <li class="c3 big0" style="top: 85%;left: 15%;"></li>
                $(function() {
                    var cssstyle = [
                        'c1 big3',
                        'c2 big3',
                        'c3 big4',
                        'c4 big5',
                        'c5 big6',
                        'c6 big3',
                        'c1 big3',
                        'c2 big3',
                        'c3 big4',
                        'c2 big5'
                    ]
                    var str = '';
                    for (var i = 0; i < 6; i++) {
                        str += '<li class="' + cssstyle[parseInt(Math.random() * 10)] + '" style="top: ' + parseInt(Math.random() * 80) + '%;left: ' + parseInt(Math.random() * 70) + '%;"><span>' + name[i] + '</span></li>'
                    }
                    $('#style').append(str)
                })
                myChart.setOption({
                    color: ['#7ecef4'],
                    backgroundColor: 'rgba(1,202,217,.2)',
                    grid: {
                        left: 40,
                        right: 20,
                        top: 30,
                        bottom: 0,
                        containLabel: true
                    },

                    xAxis: {
                        type: 'value',
                        axisLine: {
                            lineStyle: {
                                color: 'rgba(255,255,255,0)'
                            }
                        },
                        splitLine: {
                            lineStyle: {
                                color: 'rgba(255,255,255,0)'
                            }
                        },
                        axisLabel: {
                            color: "rgba(255,255,255,0)"
                        },
                        boundaryGap: [0, 0.01]
                    },
                    yAxis: {
                        type: 'category',
                        axisLine: {
                            lineStyle: {
                                color: 'rgba(255,255,255,.5)'
                            }
                        },
                        splitLine: {
                            lineStyle: {
                                color: 'rgba(255,255,255,.1)'
                            }
                        },
                        axisLabel: {
                            color: "rgba(255,255,255,.5)"
                        },
                        data: name
                    },
                    // series: [{
                    //     realtimeSort: false,
                    //     name: 'X',
                    //     type: 'bar',
                    //     data: data,
                    //     label: {
                    //         show: false,
                    //         position: 'right',
                    //         valueAnimation: true
                    //     }
                    // }],
                    series: [{
                        name: '2011年',
                        type: 'bar',
                        barWidth: 20,
                        label: {
                            show: true,
                            position: 'right',
                            valueAnimation: true,
                            color: 'rgba(230,253,139,.7)'
                        },
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(
                                    1, 0, 0, 1, [{
                                        offset: 0,
                                        color: 'rgba(230,253,139,.7)'
                                    }, {
                                        offset: 1,
                                        color: 'rgba(41,220,205,.7)'
                                    }]
                                )
                            }
                        },
                        data: value
                    }]
                });
            }, (e) => {})
    </script>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('pumiddboxtbott1'));
        option = {
            backgroundColor: 'rgba(1,202,217,.2)',
            grid: {
                left: 60,
                right: 60,
                top: 70,
                bottom: 40
            },

            toolbox: {
                feature: {
                    dataView: {
                        show: true,
                        readOnly: false
                    },
                    magicType: {
                        show: true,
                        type: ['line', 'bar']
                    },
                    restore: {
                        show: true
                    },
                    saveAsImage: {
                        show: true
                    }
                }
            },
            legend: {
                top: 10,
                textStyle: {
                    fontSize: 10,
                    color: 'rgba(255,255,255,.7)'
                },
                data: ['2017年', '2018年', '同比增速']
            },
            xAxis: [{
                type: 'category',
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,.2)'
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,.1)'
                    }
                },
                axisLabel: {
                    color: "rgba(255,255,255,.7)"
                },

                data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
                axisPointer: {
                    type: 'shadow'
                }
            }],
            yAxis: [{
                type: 'value',
                name: '',
                min: 0,
                max: 250,
                interval: 50,
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,.3)'
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,.01)'
                    }
                },

                axisLabel: {
                    formatter: '{value} ml'
                }
            }, {
                type: 'value',
                name: '',
                max: 25,
                interval: 5,
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,.3)'
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,.1)'
                    }
                },
                axisLabel: {
                    formatter: '{value} °C'
                }
            }],
            series: [

                {
                    name: '2017年',
                    type: 'bar',
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1, [{
                                    offset: 0,
                                    color: '#b266ff'
                                }, {
                                    offset: 1,
                                    color: '#121b87'
                                }]
                            )
                        }
                    },
                    data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
                }, {
                    name: '2018年',
                    type: 'bar',
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1, [{
                                    offset: 0,
                                    color: '#00f0ff'
                                }, {
                                    offset: 1,
                                    color: '#032a72'
                                }]
                            )
                        }
                    },
                    data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
                }, {
                    name: '同比增速',
                    type: 'line',
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1, [{
                                    offset: 0,
                                    color: '#fffb34'
                                }, {
                                    offset: 1,
                                    color: '#fffb34'
                                }]
                            )
                        }
                    },
                    yAxisIndex: 1,
                    data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
                }
            ]
        };
        myChart.setOption(option);
    </script>

</body>

</html>